<template>
  <section class="todoapp">
    <!-- 头部部分 -->
   <todo-Header
   @addTask="hAddMsg"
   ></todo-Header>
    <!-- 主体部分 -->
    <todo-Main
    :list="showList"
    @delTask="hDelTask"
    @changeStatus="hChangeStatus"
    ></todo-Main>
    <!-- 底部部分 -->
    <todo-Footer
    :list="showList"
    @clearAll="hClearAll"
    @typeSelect="hTypeSelect"
    ></todo-Footer>
  </section>
</template>

<script>
import todoHeader from "./components/todoHeader.vue"
import todoMain from "./components/todoMain.vue"
import todoFooter from "./components/todoFooter.vue"
export default {
  components: {
    todoHeader,
    todoMain,
    todoFooter
  },
  data() {
    return {
        list: [
        { id: 1, name: '吃饭', isDone: true },
        { id: 2, name: '睡觉', isDone: false },
        { id: 3, name: '打豆豆', isDone: true }
      ],
      type:"all"
    };
  },
  methods: {
    hAddMsg(task){
      console.log(task);
      this.list.push({
        id:Date.now(),
        name:task,
        isDone:false
      })
    },
    hDelTask(id){
     const index=this.list.findIndex(item=>item.id===id)
     this.list.splice(index,1)
    },
    hClearAll(){
      return this.list=this.list.filter(item=>!item.isDone)
    },
    hChangeStatus(id){
      const item=this.list.find(item=>item.id===id)
      item.isDone=!item.isDone
    },
    hTypeSelect(type){
      console.log(this.type);
    this.type=type
    console.log(this.type);
    },
  },
  computed: {
    showList(){
     if(this.type==="active"){
        return this.list.filter(item=>!item.isDone)
      }
      else if(this.type==="completed"){
        return this.list.filter(item=>item.isDone)
      }
      else{
        return this.list
      }
    }
  }

}
</script>

<style></style>
